<!-- 项目信息组件 -->
<template>
	<div>
		<div class="topNav">
			<el-input type="text" v-model="queryProjectParam.keyword" placeholder="输入项目编号、名称、简介查询"
				style="width: 300px;"></el-input>
			<span style="color: #909399;font-size: 15px;">选择时间段:</span>
			<el-date-picker style="width:220px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
				v-model="queryProjectParam.queryStartTime" placeholder="开始时间">
			</el-date-picker>
			<el-date-picker style="width:220px" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
				v-model="queryProjectParam.queryEndTime" placeholder="结束时间">
			</el-date-picker>
			<el-button icon="el-icon-search" size="small" @click="loadData(1)">查询</el-button>
			<el-button type="primary" size="small" @click="addDialogStatus=true">新增项目</el-button>
			<hr>
		</div>
		<!-- 数据展示 -->
		<el-table :data="projectList">
			<el-table-column type="selection" width="50">
			</el-table-column>
			<el-table-column stripe type="index" label="No." align="center">
			</el-table-column>
			<el-table-column prop="projectName" label="项目名称" width="150px">
			</el-table-column>
			<el-table-column prop="projectIntro" label="项目简介">
			</el-table-column>
			<el-table-column prop="projectDesc" label="项目描述">
			</el-table-column>
			<el-table-column prop="projectState" :formatter="pStateStatus" label="当前状态" width="100px">
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" size="small" round @click="openMemberForm(scope.row)">成员管理</el-button>
					<el-button type="primary" size="small" round @click="openUpdateForm(scope.row)">修改</el-button>
					<el-button type="primary" v-if="scope.row.projectState==0 ? true : false" size="small" round
						@click="openProject(scope.row)">打开</el-button>
					<el-button type="danger" v-else size="small" round @click="closeProject(scope.row)">关闭</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination layout="prev, pager, next" :page-size="queryProjectParam.pageSize"
			:current-page="queryProjectParam.indexPage" :total="total" @current-change="pageLoad">
		</el-pagination>
		<div>
			<!-- 新增弹出框 -->
			<el-dialog title="新增项目" :visible.sync="addDialogStatus">
				<el-form label-width="80px">
					<el-form-item label="项目名称">
						<el-input type="text" v-model="addProjectParam.projectName"></el-input>
					</el-form-item>
					<el-form-item label="项目简介">
						<el-input type="text" v-model="addProjectParam.projectIntro"></el-input>
					</el-form-item>
					<el-form-item label="项目详细介绍">
						<el-input type="textarea" v-model="addProjectParam.projectDesc"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer">
					<el-button @click="addDialogStatus = false">取消</el-button>
					<el-button type="primary" @click="saveProject">提交</el-button>
				</div>
			</el-dialog>
			<!-- 修改弹出框 -->
			<el-dialog title="修改" :visible.sync="updateDialogStatus">
				<el-form label-width="80px">
					<el-form-item label="项目名称">
						<el-input type="text" v-model="updateProjectParam.projectName"></el-input>
					</el-form-item>
					<el-form-item label="项目简介">
						<el-input type="text" v-model="updateProjectParam.projectIntro"></el-input>
					</el-form-item>
					<el-form-item label="项目详细介绍">
						<el-input type="textarea" v-model="updateProjectParam.projectDesc"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer">
					<el-button @click="updateDialogStatus = false">取消</el-button>
					<el-button type="primary" @click="updateProject">提交</el-button>
				</div>
			</el-dialog>
			<!-- 成员管理 -->
			<!-- <el-dialog :title="opendProjectName" :visible.sync="memberDialogStatus">
				<el-collapse accordion>
					<el-collapse-item v-for="(item,index) in menberList" :title="item.userAccountName" name="1">

					</el-collapse-item>
				</el-collapse>
				<div slot="footer">
					<el-button @click="memberDialogStatus = false">取消</el-button>
					<el-button type="primary">提交</el-button>
				</div>
			</el-dialog> -->
		</div>
	</div>

</template>

<script>
	export default {
		name: 'project',
		data() {
			return {
				queryProjectParam: {
					projectId: null,
					projectName: null,
					projectState: null,
					keyword: null,
					indexPage: 1,
					pageSize: 3,
					queryStartTime: null,
					queryEndTime: null
				},
				queryMenberParam: {
					projectId: null,

				},
				addProjectParam: {
					projectName: null,
					projectIntro: null,
					projectDesc: null

				},
				updateProjectParam: {
					projectId: null,
					projectName: null,
					projectIntro: null,
					projectDesc: null,
					projectState: null
				},
				addDialogStatus: false,
				updateDialogStatus: false,
				memberDialogStatus: false,
				opendProjectName: null,
				total: null,
				projectList: [],
			}
		},
		methods: {
			//加载数据
			loadData(currentPag) {
				if (currentPag != undefined) {
					this.queryProjectParam.indexPage = currentPag;
				}
				this.$http.post("/project/query", this.queryProjectParam).then(resp => {
					if (resp.data.flag) {
						this.projectList = resp.data.data.data;
						this.total = resp.data.data.total;
					}

				})
			},
			//切换页面
			pageLoad(index) {
				this.queryProjectParam.indexPage = index;
				this.loadData();
			},
			//项目状态展示
			pStateStatus(a, b, cellValue) {
				if (cellValue == 1) {
					return "有效";
				} else if (cellValue == 2) {
					return "新建"
				} else {
					return "关闭"
				}
			},
			//新增项目
			saveProject() {
				this.$http.post("/project/save", this.addProjectParam).then(resp => {
					if (resp.data.flag) {
						this.clearAddForm();
						this.addDialogStatus = false
						this.loadData();
					}
				})
			},
			//清空添加表单
			clearAddForm() {
				this.addProjectParam = {}
			},
			//清空新增表单
			clearUpdateForm() {
				this.updateProjectParam = {}
			},
			//打开修改弹出框
			openUpdateForm(rowObj) {
				this.updateDialogStatus = true;
				this.updateProjectParam.projectName = rowObj.projectName;
				this.updateProjectParam.projectDesc = rowObj.projectDesc;
				this.updateProjectParam.projectIntro = rowObj.projectIntro;
				this.updateProjectParam.projectId = rowObj.projectId;
			},
			//修改项目
			updateProject() {
				this.$http.post("/project/save", this.updateProjectParam).then(resp => {
					if (resp.data.flag) {
						this.clearUpdateForm();
						this.updateDialogStatus = false;
						this.loadData();
					}
				})
			},
			//关闭项目
			closeProject(rowObj) {
				this.updateProjectParam.projectState = 0;
				this.updateProjectParam.projectName = rowObj.projectName;
				this.updateProjectParam.projectDesc = rowObj.projectDesc;
				this.updateProjectParam.projectIntro = rowObj.projectIntro;
				this.updateProjectParam.projectId = rowObj.projectId;
				this.$http.post("/project/save", this.updateProjectParam).then(resp => {
					if (resp.data.flag) {
						this.clearUpdateForm();
						this.loadData();
					}
				})
			},
			//打开项目
			openProject(rowObj) {
				this.updateProjectParam.projectState = 1;
				this.updateProjectParam.projectName = rowObj.projectName;
				this.updateProjectParam.projectDesc = rowObj.projectDesc;
				this.updateProjectParam.projectIntro = rowObj.projectIntro;
				this.updateProjectParam.projectId = rowObj.projectId;
				this.$http.post("/project/save", this.updateProjectParam).then(resp => {
					if (resp.data.flag) {
						this.clearUpdateForm();
						this.loadData();
					}
				})
			},
			//打开成员管理表单
			openMemberForm(rowObj) {
				// this.memberDialogStatus = true;
				var projectId= rowObj.projectId;
				// console.log(rowObj.projectId)
				var project={
					projectId:projectId,
					projectName:rowObj.projectName
				}
				localStorage.setItem("project",JSON.stringify(project))
				//跳往成员管理
				this.$router.push("/main/member")
				
			}
		},
		created() {
			this.loadData();
		}

	}
</script>
<style>
	.topNav {}
</style>
